<template>
  <div class="aui-content">
    <div class="aui-container">
      <div class="aui-form">
        <div class="aui-image">
          <div class="aui-image-text">
            <img :src="jeecgAdTextImg" alt="" />
          </div>
        </div>
        <div class="aui-formBox">
          <div class="aui-formWell">
            <a-form ref="formRef" :model="formData">
              <div class="aui-flex aui-form-nav aui-clear-left" style="padding-bottom: 21px">
                <div class="aui-flex-box activeNav on">{{ t('sys.login.signUpFormTitle') }}</div>
              </div>
              <div class="aui-form-box">
                <div class="aui-account aui-account-line">
                  <a-form-item>
                    <div class="aui-input-line">
                      <Icon class="aui-icon" icon="ant-design:user-outlined" />
                      <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
                    </div>
                  </a-form-item>
                  <a-form-item>
                    <div class="aui-input-line">
                      <Icon class="aui-icon" icon="ant-design:mobile-outlined" />
                      <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.mobile')" v-model:value="formData.mobile" />
                    </div>
                  </a-form-item>
                  <a-form-item>
                    <div class="aui-input-line">
                      <Icon class="aui-icon" icon="ant-design:mail-outlined" />
                      <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.smsCode')" v-model:value="formData.smscode" />
                      <div v-if="showInterval" class="aui-code-line" @click="getLoginCode">{{ t('component.countdown.normalText') }}</div>
                      <div v-else class="aui-code-line">{{ t('component.countdown.sendText', [unref(timeRuning)]) }}</div>
                    </div>
                  </a-form-item>
                  <a-form-item>
                    <div class="aui-input-line">
                      <Icon class="aui-icon" icon="ant-design:lock-outlined" />
                      <a-input
                        class="fix-auto-fill"
                        :type="pwdIndex === 'close' ? 'password' : 'text'"
                        :placeholder="t('sys.login.password')"
                        v-model:value="formData.password"
                      />
                      <div class="aui-eye">
                        <img :src="eyeKImg" alt="开启" v-if="pwdIndex === 'open'" @click="pwdClick('close')" />
                        <img :src="eyeGImg" alt="关闭" v-else-if="pwdIndex === 'close'" @click="pwdClick('open')" />
                      </div>
                    </div>
                  </a-form-item>
                  <a-form-item>
                    <div class="aui-input-line">
                      <Icon class="aui-icon" icon="ant-design:lock-outlined" />
                      <a-input
                        class="fix-auto-fill"
                        :type="confirmPwdIndex === 'close' ? 'password' : 'text'"
                        :placeholder="t('sys.login.confirmPassword')"
                        v-model:value="formData.confirmPassword"
                      />
                      <div class="aui-eye">
                        <img :src="eyeKImg" alt="开启" v-if="confirmPwdIndex === 'open'" @click="confirmPwdClick('close')" />
                        <img :src="eyeGImg" alt="关闭" v-else-if="confirmPwdIndex === 'close'" @click="confirmPwdClick('open')" />
                      </div>
                    </div>
                  </a-form-item>
                  <a-form-item name="policy">
                    <div class="aui-flex">
                      <div class="aui-flex-box">
                        <div class="aui-choice">
                          <a-checkbox v-model:checked="formData.policy" />
                          <span style="color: #1b90ff; margin-left: 4px">{{ t('sys.login.policy') }}</span>
                        </div>
                      </div>
                    </div>
                  </a-form-item>
                </div>
              </div>
              <div class="aui-formButton">
                <div class="aui-flex">
                  <a class="aui-link-login aui-flex-box" @click="registerHandleClick"> {{ t('sys.login.registerButton') }}</a>
                </div>
                <div class="aui-flex">
                  <a class="aui-linek-code aui-flex-box" @click="goBackHandleClick">{{ t('sys.login.backSignIn') }}</a>
                </div>
              </div>
            </a-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="mini-register">
import { ref, reactive, unref, toRaw } from 'vue';
import { getCaptcha, register } from '@/api/sys/user';
import { SmsEnum } from '@/views/sys/login/useLogin';
import { useMessage } from '@/hooks/web/useMessage';
import logoImg from '@/assets/loginmini/icon/jeecg_logo.png';
import jeecgAdTextImg from '@/assets/loginmini/icon/jeecg_ad_text.png';
import eyeKImg from '@/assets/loginmini/icon/icon-eye-k.png';
import eyeGImg from '@/assets/loginmini/icon/icon-eye-g.png';
import { useI18n } from '@/hooks/web/useI18n';

const { t } = useI18n();
const { notification, createErrorModal, createMessage } = useMessage();
const emit = defineEmits(['go-back', 'success', 'register']);
const formRef = ref();
const formData = reactive<any>({
  username: '',
  mobile: '',
  smscode: '',
  password: '',
  confirmPassword: '',
  policy: false,
});
//是否显示获取验证码
const showInterval = ref<boolean>(true);
//60s
const timeRuning = ref<number>(60);
//定时器
const timer = ref<any>(null);
//密码眼睛打开关闭
const pwdIndex = ref<string>('close');
//确认密码眼睛打开关闭
const confirmPwdIndex = ref<string>('close');

/**
 * 返回
 */
function goBackHandleClick() {
  emit('go-back');
  initForm();
}

/**
 * 获取手机验证码
 */
async function getLoginCode() {
  if (!formData.mobile) {
    createMessage.warn(t('sys.login.mobilePlaceholder'));
    return;
  }
  const result = await getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.REGISTER });
  if (result) {
    const TIME_COUNT = 60;
    if (!unref(timer)) {
      timeRuning.value = TIME_COUNT;
      showInterval.value = false;
      timer.value = setInterval(() => {
        if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
          timeRuning.value = timeRuning.value - 1;
        } else {
          showInterval.value = true;
          clearInterval(unref(timer));
          timer.value = null;
        }
      }, 1000);
    }
  }
}

function registerHandleClick() {
  if (!formData.username) {
    createMessage.warn(t('sys.login.accountPlaceholder'));
    return;
  }
  if (!formData.mobile) {
    createMessage.warn(t('sys.login.mobilePlaceholder'));
    return;
  }
  if (!formData.smscode) {
    createMessage.warn(t('sys.login.smsPlaceholder'));
    return;
  }
  if (!formData.password) {
    createMessage.warn(t('sys.login.passwordPlaceholder'));
    return;
  }
  if (!formData.confirmPassword) {
    createMessage.warn(t('sys.login.confirmPassword'));
    return;
  }
  if (formData.password !== formData.confirmPassword) {
    createMessage.warn(t('sys.login.diffPwd'));
    return;
  }
  if (!formData.policy) {
    createMessage.warn(t('sys.login.policyPlaceholder'));
    return;
  }
  registerAccount();
}

/**
 * 注册账号
 */
async function registerAccount() {
  try {
    const resultInfo = await register(
      toRaw({
        username: formData.username,
        password: formData.password,
        phone: formData.mobile,
        smscode: formData.smscode,
      })
    );
    if (resultInfo && resultInfo.data.success) {
      notification.success({
        description: resultInfo.data.message || t('sys.api.registerMsg'),
        duration: 3,
      });
      emit('success', { username: formData.username, password: formData.password });
      initForm();
    } else {
      notification.warning({
        message: t('sys.api.errorTip'),
        description: resultInfo.data.message || t('sys.api.networkExceptionMsg'),
        duration: 3,
      });
    }
  } catch (error) {
    notification.error({
      message: t('sys.api.errorTip'),
      description: error.message || t('sys.api.networkExceptionMsg'),
      duration: 3,
    });
  }
}

/**
 * 初始化表单
 */
function initForm() {
  Object.assign(formData, { username: '', mobile: '', smscode: '', password: '', confirmPassword: '', policy: false });
  if (!unref(timer)) {
    showInterval.value = true;
    clearInterval(unref(timer));
    timer.value = null;
  }
  formRef.value.resetFields();
}

/**
 * 密码打开或关闭
 * @param value
 */
function pwdClick(value) {
  pwdIndex.value = value;
}

/**
 * 确认密码打开或关闭
 * @param value
 */
function confirmPwdClick(value) {
  confirmPwdIndex.value = value;
}

defineExpose({
  initForm,
});
</script>
<style lang="less" scoped>
@import '@/assets/loginmini/style/home.less';
@import '@/assets/loginmini/style/base.less';
.aui-input-line .aui-icon {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  font-size: 20px !important;
}
</style>
